<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优菜商城</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="author" content="@binggan" />
		<link rel="stylesheet" href="css/ydui.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_463779_pkv3jpw5yz1fko6r.css" />
		<link rel="stylesheet" type="text/css" href="multipicker/MultiPicker.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/flexible.js"></script>
	</head>

	<body>
		<section class="g-flexview">
			<header class="m-navbar index-navbar border-bot">
				<a href="#" class="navbar-item back">
					<i class="back-ico"></i>
				</a>
				<div class="navbar-center">
					<span class="navbar-title">确认订单</span>
				</div>
			</header>
			<div class="g-scrollview page-confirm-order">

				<a class="address-info-box" href="mine-addr.html">
					<i class="iconfont icon-shouhuodizhi"></i>
					<div class="user-addr-info">
						<div class="user-addr-info-top">
							<p>收货人：张三</p>
							<p>123456789012</p>
						</div>
						<p>收货地址：湖北省武汉市洪山区书城路文秀街</p>
					</div>
					<i class="iconfont icon-arrow-right select-addr"></i>
				</a>

				<!--商品列表-->
				<div class="order-lists-item white-bg border-bot">
					<a href="order-detail.html" class="order-item-info border-bot">
						<div class="item-right">
							<div class="thumbnail">
								<img src="http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg">
							</div>
							<div class="iten-right-info">
								<p class="item-right-name text-overfow">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮</p>
								<div class="iten-right-info-bot">
									<p class="price-box">¥<span class="price unit-price">134.45</span></p>
									<p>X<span class="mernum">1</span></p>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-lists-item white-bg border-bot">
					<a href="order-detail.html" class="order-item-info border-bot">
						<div class="item-right">
							<div class="thumbnail">
								<img src="http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg">
							</div>
							<div class="iten-right-info">
								<p class="item-right-name text-overfow">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮</p>
								<div class="iten-right-info-bot">
									<p class="price-box">¥<span class="price unit-price">134.45</span></p>
									<p>X<span class="mernum">1</span></p>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-lists-item white-bg border-bot">
					<a href="order-detail.html" class="order-item-info border-bot">
						<div class="item-right">
							<div class="thumbnail">
								<img src="http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg">
							</div>
							<div class="iten-right-info">
								<p class="item-right-name text-overfow">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮</p>
								<div class="iten-right-info-bot">
									<p class="price-box">¥<span class="price unit-price">134.45</span></p>
									<p>X<span class="mernum">1</span></p>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!--商品列表end-->
				<p class="oreder-button-group white-bg">共6件商品</p>

				<div class="white-bg sep-items">
					<div class="border-bot infos-bot">
						<p>运费<span class="sma-tips txt-grey">（满**元免运费）</span></p>
						<span class="txt-grey">0</span>
					</div>
					<div class="border-bot infos-bot select-delivery-time">
						<p>配送时间：</p>
						<input type="text" class="delivery-addr" name="" id="delivery-addr" placeholder="请选择配送时间" readonly="readonly" />
						<i class="iconfont icon-arrow-right select-addr"></i>
					</div>
					<div class="infos-bot select-delivery-time">
						<p>备注：</p>
						<textarea name="remarks" class="delivery-addr" rows="3"></textarea>
					</div>
				</div>

			</div>
			<!--时间选择-->
			<ul class="m-actionsheet" id="delivery-time">
			    <li class="actionsheet-item active">明天上午07:00—09：00</li>
			    <li class="actionsheet-item">明天上午09:00—11：00</li>
			    <li class="actionsheet-item"> 后天上午07:00—09：00</li>
			    <li class="actionsheet-item">后天上午09:00—11：00</li>
			    <li class="actionsheet-action" id="J_Cancel">确定</li>
			</ul>
			
			<!--底部结算栏-->
			<div class="total-bar confirm-order-tab">
				<div class="total-area">
					<span>合计：</span>
					<span class="totaol-price-box">¥<span class="total-price">355.50</span></span>
				</div>
				<a class="cart-final-btn settle-btn" href="confirm-pay.html">去结算</a>
				<span class="cart-final-btn del-btn hide">删除</span>
			</div>
			
		</section>
		<script src="js/jquery.min.js"></script>
		<script src="js/ydui.js"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
				var $act = $('#delivery-time'),
					$items=$("#delivery-time .actionsheet-item"),
					$timeShow=$("#delivery-addr");
				$('#delivery-addr').on('click', function() {
					$act.actionSheet('open');
				});
				$('#J_Cancel').on('click', function() {
					$act.actionSheet('close');
				});
				$items.on('click',function(){
					$(this).addClass('active').siblings().removeClass('active');
				})

				/* 时间选择器关闭事件 */
				$act.on('close.ydui.actionsheet', function() {
					var select_time=$('#delivery-time .actionsheet-item.active').text();
					$timeShow.val(select_time);
				});
			</script>
	</body>

</html>